import NavBar from "../components/commons/navbar/NavBar.tsx";
import SideBarConsole from "../components/console/SideBarConsole.tsx";
import TableContainer from "../components/console/TableContainer.tsx";
import {
    convertBooksToTableData,
    convertOrdersToTableData,
    convertStacksToTableData,
    convertUserAccountsToTableData,
    TableData
} from "../model/TableData.ts";
import TableTypes from "../model/TableTypes.ts";
import {useEffect, useState} from "react";
import Modal from "../components/console/modal/Modal.tsx";

import "../styles/modules/console.css"
import FAB from "../components/commons/FAB.tsx";
import {Stack} from "../model/Stack.ts";
import {baseUrl} from "../settings/Settings.ts";
import ToastNotification from "../components/commons/ToastNotification.tsx";
import Order from "../model/Order.ts";
import UserAccount from "../model/UserAccount.ts";
import Book from "../model/Book.ts";

const ManagementPage = () => {

    const [tableType, setTableType] = useState(TableTypes.USERS)
    const [tableName, setTableName] = useState("Users")
    const [tableContent, setTableContent] = useState<TableData[]>([])



    const [stacks, setStacks] = useState<Stack[]>([])
    const [orders, setOrders] = useState<Order[]>([])
    const [users, setUsers] = useState<UserAccount[]>([])
    const [books, setBooks] = useState<Book[]>([])
    //TODO const [users, setUsers] = useState...
    //TODO const [books, setBooks] = useState...
    //TODO const [managers, setManagers] = useState...
    const fetchData = async () => {
        try {
            const response = await fetch(`${baseUrl}/api/stack/info`);
            const response_orders = await fetch(`${baseUrl}/api/orders/all/info`);
            const response_accounts = await fetch(`${baseUrl}/api/account/all/info`);
            const response_books = await fetch(`${baseUrl}/api/library/book/all/info`);


            const data_orders = await response_orders.json();
            const data_accounts = await response_accounts.json();
            const data_books = await response_books.json();

            if (response_orders.ok) {
                console.log(data_orders.orders)
                setOrders(data_orders.orders)
            }

            if (response_accounts.ok) {
                setUsers(data_accounts.accounts)
            }

            if (response_books.ok) {
                setBooks(data_books.books)
            }

            //TODO fetch all managers

            const data = await response.json();
            console.log(data)

            setStacks(data.stacks)
            //TODO setUsers(userData.users)
            //TODO setManagers(managerData.managers)
            //TODO setBooks(booksData.books)


        } catch (error) {
            console.error('Error fetching data')
        }
    }



    useEffect(() => {
        fetchData();
    }, []);

    useEffect(() => {
        updateContent(tableType)
    }, [stacks]);


    const [modalData, setModalData] = useState<TableData>()
    const updateContent = (tableType: TableTypes) => {

        setTableType(tableType)

        switch (tableType) {

            case TableTypes.USERS:
                setTableName("Users")
                setTableContent(convertUserAccountsToTableData(users))
                break

            case TableTypes.BOOKS:
                setTableName("Books")
                setTableContent(convertBooksToTableData(books))
                break

            case TableTypes.MANAGERS:
                setTableName("Managers")
                //TODO write method that will convert manager to table data
                break


            case TableTypes.STACKS:
                setTableName("Stacks")
                setTableContent(convertStacksToTableData(stacks))
                break


            case TableTypes.ORDERS:
                setTableName("Orders")
                setTableContent(convertOrdersToTableData(orders))
                break

        }


    }


    const createRecord = () => {


    }


    return (
        <>
            <Modal updateDataOnPage={fetchData} data={modalData} type={tableType}/>


            <NavBar/>

            <main className="d-flex flex-nowrap overflow-y-scroll" id={"main-console"}>


                <SideBarConsole updateContent={updateContent}/>
                <TableContainer updateDataOnPage={fetchData} modalTrigger={setModalData} name={tableName} type={tableType} data={tableContent}/>


                <ToastNotification/>
            </main>

            <FAB
                img={"M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2"}
                clickHandler={createRecord}/>

        </>
    )
}

export default ManagementPage